<template>
	<div class="library_block_list">
		<el-row :gutter="16" class="library_block_list">
			<el-col :span="responsive" v-for="(item, index) in data" :key="index">
				<div class="item">
					<div class="img" @click="handleLookLibrary(item)">
						<img class="cover" :src="libraryCover(item)" :alt="item.name" />
						<span>{{ item.name }}</span>
						<p class="avatar">
							<img :src="avatarImage(item)" :alt="item.name" />
							{{ item.createName }}
						</p>
					</div>
					<div class="bot">
						<span class="el-icon-file-count">{{ item.diskCount }}</span>
						<slot name="handle" :data="item"></slot>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import libraryMixins from './mixins/library';
import dynamicColum from '@/mixins/dynamicColum';
export default {
	mixins: [libraryMixins, dynamicColum],
	props: {
		data: { type: Array, default: () => [] }
	},
	data() {
		return {};
	},
	methods: {
		//查看库资源
		handleLookLibrary(data) {
			this.$emit('look', data);
		}
	}
};
</script>

<style lang="scss" scoped>
.library_block_list {
	.el-col {
		margin-top: 16px;
	}
	.el-col-5 {
		width: 20%;
	}
	.el-col-4:nth-child(1),
	.el-col-4:nth-child(2),
	.el-col-4:nth-child(3),
	.el-col-4:nth-child(4),
	.el-col-4:nth-child(5),
	.el-col-4:nth-child(6),
	.el-col-5:nth-child(1),
	.el-col-5:nth-child(2),
	.el-col-5:nth-child(3),
	.el-col-5:nth-child(4),
	.el-col-5:nth-child(5),
	.el-col-6:nth-child(1),
	.el-col-6:nth-child(2),
	.el-col-6:nth-child(3),
	.el-col-6:nth-child(4) {
		margin-top: 0;
	}
	.item {
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}
	.img {
		position: relative;
		padding-top: 56.25%;
		cursor: pointer;
		&::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: '';
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 2;
		}
		img.cover {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: 1;
		}
		span {
			position: absolute;
			top: 50%;
			left: 15px;
			right: 15px;
			height: 48px;
			margin-top: -24px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			z-index: 3;
		}
		p.avatar {
			position: absolute;
			bottom: 6px;
			left: 6px;
			display: flex;
			align-items: center;
			z-index: 3;
			color: #fff;
			img {
				width: 24px;
				height: 24px;
				border-radius: 50%;
				object-fit: cover;
				margin-right: 6px;
			}
		}
	}
	.bot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px;
		border-top: none;
		border: solid 1px #eef1f5;
		span.el-icon-file-count {
			color: #666;
			&::before {
				color: #777;
				margin-right: 6px;
			}
		}
		span.el-icon-more {
			cursor: pointer;
		}
	}
}
</style>
